<template>
    <Popup class="tech-custom-authentication" v-model="showCustomAuthentication" :close-on-click-overlay="false">
        <div class="tech-modal">
            <div class="modal-title">
                <div class="title-name">手机号认证</div>
                <i class="tech-icon tech-icon-close tech-icon-default tech-popup-close-icon" @click="close" />
            </div>
            <div class="modal-content">
                <div class="phone-code-tip">输入短信验证码进行身份验证</div>
                <Field v-model="mobile" type="number" :disabled="mobileDisabled" placeholder="输入您的手机号" :autofocus="true" :maxlength="11"  :error-message="phoneError" />
                <!-- <Field v-model="phone" type="number" :disabled="true" placeholder="输入您的手机号" /> -->
                <Field v-model="code" type="number" placeholder="输入验证码" :maxlength="4" :error-message="codeError">
                    <Button v-if="isWait" class="get-code" type="default" plain size="small" slot="button" :disabled="true">{{`${times}s后重发`}}</Button>
                    <Button v-else class="get-code" type="danger" plain size="small" slot="button" @click="getCode">获取验证码</Button>
                </Field>
                <div class="btn-list">
                    <Button :disabled="isLoading" @click="close">取消</Button>
                    <Button type="danger" :disabled="isDisabled" :loading="isLoading" @click="authentication">确定</Button>
                </div>
            </div>
        </div>
    </Popup>
</template>

<script>
import { Popup, Field, Button } from 'vant';
import { mapState, mapActions } from 'vuex';
import { validatePhone } from '@common/reg';
import { sendVerifyCode, checkVerifyCode } from '@common/market';
export default {
    name: 'CustomAuthentication',
    components: {
        Popup,
        Button,
        Field,
    },
    props: {
        phone: {
            type: [String, Number],
            default: '',
        },
    },
    computed: {
        isDisabled() {
            return (this.mobile || '').trim() === '' || this.code.trim() === '';
        },
        phoneError() {
            const val = this.mobile.trim();
            if (val.length === 11 && !validatePhone(val)) {
                return '手机号不正确';
            }
            return '';
        },
    },
    watch: {
        phone(val) {
            if (val && validatePhone(val)) {
                this.mobile = val;
                this.mobileDisabled = true;
            } else {
                this.mobileDisabled = false;
            }
        },
    },
    data() {
        return {
            mobile: '',
            mobileDisabled: false,
            showCustomAuthentication: false,
            isWait: false,
            times: 35,
            isLoading: false,
            codeError: '',
            code: '',
        };
    },
    methods: {
        show() {
            this.showCustomAuthentication = true;
        },
        close() {
            Object.assign(this.$data, this.$options.data());
            clearInterval(this.code_interval);
        },
        getCode() {
            // 获取验证码
            this.isWait = true;
            this.isLoading = false;
            const flag = sendVerifyCode(this.phone);
            if (flag) {
                this.code_interval = setInterval(() => {
                    if (this.times > 0) {
                        this.times--;
                    } else {
                        this.isWait = false;
                        this.times = 35;
                        clearInterval(this.code_interval);
                    }
                }, 1000);
            }
        },
        async authentication() {
            this.isLoading = true;
            // 验证
            const result = await checkVerifyCode(this.mobile, this.code) || false;
            this.$emit('authResult', result);
            this.close();
        },
        error() {
            this.isLoading = false;
            this.codeError = '验证码不正确';
        },
    },
};
</script>
<style lang="less">
.tech-custom-authentication {
    width: 100%;
    height: 100%;
    .flex-column-center();
    background-color: transparent;
    .tech-modal {
        width: 90%;
        position: relative;
        &.show-keyboard {
            .m-t(-160);
        }
    }
    .auth-tip {
        color: @text-color;
        .t-c();
        .font-size();
        .m-v(@gap-md);
    }
    .phone-code-tip {
        color: @gray-darker;
        .font-size();
        .t-l();
        .m-b(@gap);
    }
    .modal-content {
        .van-field {
            border: @border;
            border-radius: @border-radius / 2;
            .m-b(@gap-md);
            &::after {
                border: none;
            }
        }
        .get-code {
            border: none;
        }
    }
    .btn-list {
        .flex-row-center();
        .van-button {
            width: 48%;
            &:last-child {
                margin-left: 4%;
            }
        }
    }
    .van-password-input {
        .m(0);
    }
    [class*=van-hairline]::after {
        border-color: @gray-dark;
    }
}
</style>

